<template>
  <quill-editor style="line-height: normal" v-model="valueModel" :options="options" @change="onChange"/>
</template>

<script>
/* eslint-disable */
import {quillEditor} from 'vue-quill-editor';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {InputType} from "@/lang/fast-form";

const title_config = {
    'ql-bold': '加粗',
    'ql-color': '颜色',
    'ql-font': '字体',
    'ql-code': '插入代码',
    'ql-italic': '斜体',
    'ql-link': '添加链接',
    'ql-background': '背景颜色',
    'ql-size': '字体大小',
    'ql-strike': '删除线',
    'ql-script': '上标/下标',
    'ql-underline': '下划线',
    'ql-blockquote': '引用',
    'ql-header': '标题',
    'ql-indent': '缩进',
    'ql-list': '列表',
    'ql-align': '文本对齐',
    'ql-direction': '文本方向',
    'ql-code-block': '代码块',
    'ql-formula': '公式',
    'ql-image': '图片',
    'ql-video': '视频',
    'ql-clean': '清除字体样式'
};

const default_options = {
    theme: "snow",
    debug: "warn",
    modules: {
        toolbar: {
            // 工具栏配置
            container: [
                // 加粗 斜体 下划线 删除线
                ["bold", "italic", "underline", "strike"]
                // 引用  代码块
                , ["blockquote", "code-block"]
                // 有序、无序列表
                , [{list: "ordered"}, {list: "bullet"}]
                // 缩进
                , [{indent: "-1"}, {indent: "+1"}]
                // 字体大小
                , [{size: ["small", false, "large", "huge"]}]
                // 标题
                , [{header: [1, 2, 3, 4, 5, 6, false]}]
                // 字体颜色、字体背景颜色
                , [{color: []}, {background: []}]
                // 对齐方式
                , [{align: []}]
                // 清除文本格式
                , ["clean"]
                // 链接、图片、视频
                // , ["link", "image", "video"]
            ]
        }
    }
}
/**
 * 富文本框组件
 */
export default {
    components: {quillEditor}
    , name: "SmartEditor"
    , inject: ['fast_form']
    , props: {
        // 字段名
        name: {type: String}
        // 表单 value
        , value: {type: String, default: undefined}
        // 富文本配置，可能要设计成从后台获取，暂时默认
        , options: {type: Object, default: () => default_options}
        // 文字提示
        , placeholder: {type: String, default: ''}
    }
    , watch: {
        value: {
            handler: function (val) {
                this.input.setFormatValue(val);
            }
        }
    }
    , data() {
        return {
            // 值模型，用于计算的值，任何时候都不允许为空，避免 vue 联动失效
            valueModel: undefined,
            // fast-form 表单接口
            input: undefined
        }
    }
    , created() {
        let input = this.fast_form.getFormInput(this.name);

        // 覆盖重写默认的函数
        input.wrap(InputType.Editor);

        input.setDom(this);
        this.input = input;
    }
    , mounted() {
        // 首次渲染数据 & 触发数据联动
        this.input.setFormatValue(this.value);

        // 直接操作 dom，增加 title 字段
        const toolbar = document.querySelector('.ql-toolbar');
        const buttons = toolbar.querySelectorAll('button');
        const selects = toolbar.querySelectorAll('select');
        buttons.forEach(function (item) {
            if (item.className === 'ql-script') {
                item.value === 'sub' ? item.title = '下标' : item.title = '上标';
            } else if (item.className === 'ql-indent') {
                item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进';
            } else {
                item.title = title_config[item.classList[0]];
                console.log( item.title );
            }
        });
        selects.forEach(function (item) {
            item.parentNode.title = title_config[item.classList[0]];
        });
    }
    , methods: {
        /**
         * 用户输入变换事件
         * @param val
         */
        onChange: function (val) {
            if(!!val){
                this.input.changeValue(val.html);
            }
        }
        /**
         * 数据受控函数，数据发生变化的时候，会通知到当前组件
         *
         * @see FastForm
         * @param val
         */
        , onChangeValue: function (val) {
            this.valueModel = val;
        }
    }
}
</script>
